<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>comicgen: Comic Creator</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    .target-container {
      background-color: #ffffff;
    }

    .target-container {
      overflow: hidden;
      position: relative;
    }

    #code {
      white-space: pre-wrap;
    }

    img {
      max-width: 100%;
    }

    .attr {
      display: inline-block;
    }

    h3 {
      color: var(--danger);
    }
  </style>
  <link href="https://learn.gramener.com/ui/bootstraptheme.css?font-family-base=Neucha%2CChalkboard%2CComic%20Sans%20MS%2Csans-serif&dark=%23675b9e&primary=%238b8ac1" rel="stylesheet">
</head>

<body class="d-flex flex-column h-full">

  <div class="container my-3">
    <div class="row my-4">
      <div class="col-xl-4">
        <h1>Make your own comic</h1>
        <md data-target="introduction"></md>
      </div>
      <div class="col-xl-8">
        <form class="selector form-inline">
          <div class="comicgen-attrs d-inline-block"></div>
          <input name="x" type="hidden" value="0">
          <input name="y" type="hidden" value="0">
          <input name="scale" type="hidden" value="1">
          <input name="width" type="hidden" value="500">
          <input name="height" type="hidden" value="600">
        </form>
        <div class="target-container my-2">
          <div class="target"></div>
        </div>
        <div class="mb-3">
          <button type="button" class="btn btn-sm btn-light border download" data-clipboard-target="#code">
            <i class="far fa-arrow-alt-circle-down"></i> Save image
          </button>
          <button type="button" class="btn btn-sm btn-light border copy" data-clipboard-target="#code">
            <i class="far fa-copy"></i> Copy code
          </button>
          <label class="mx-1">
            Background <input type="color" value="#ffffff" class="btn btn-light border p-0 bg-color">
          </label>
          <a class="btn btn-sm btn-light border urlfilter reset" data-target="#" href="#">
            <i class="fa fa-arrows-alt"></i> Reset position
          </a>
          <span>Pinch to zoom. Pan to move</span>
        </div>
        <script type="text/html" class="codegen">
          <pre id="code">&lt;g class="comicgen"<% _.each(q, function(v, k) { %> <%- k %>="<%- v %>"<% }) %>&gt;&lt;/g&gt;</pre>
        </script>
      </div><!-- .col -->
    </div><!-- .row -->
  </div>

  <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://unpkg.com/lodash@4.17.11/lodash.min.js"></script>
  <script src="https://unpkg.com/g1@0.17.0/dist/g1.min.js"></script>
  <script src="https://unpkg.com/highlightjs@9.12.0/highlight.pack.min.js"></script>
  <script src="https://unpkg.com/clipboard@2.0.4/dist/clipboard.min.js"></script>
  <script src="https://unpkg.com/plain-draggable@2.5.12/plain-draggable.min.js"></script>
  <script src="https://unpkg.com/save-svg-as-png@1.4.14/lib/saveSvgAsPng.js"></script>
  <script src="https://unpkg.com/flubber@0.3.0"></script>
  <script src="https://cdn.jsdelivr.net/npm/comicgen"></script>
  <script src="./script.js"></script>
</body>

</html>